<template>
  <div>
    <div>
      <div class="comment-header">
        <div class="author">{{ reply.commenter_name }}<i class="el-icon-right">{{reply.to_commenter_name}}</i></div>
      </div>
      <div class="comment-content">{{ reply.reply_content }}</div>
      <div class="comment-options">
        <p class="timestamp">{{reply.create_time|formatDate}}</p>
        <p>
          <el-link @click="CommentThumb"
                   :underline="false"
                   type="info"
                   :style="isLiked?'color:red':''"
                   class="fa fa-heart"></el-link> {{reply.like_count}}
          <el-link class="el-icon-chat-round"
                   :underline="false"
                   @click="addReplyComment"
                   style="margin:0 10px;"
                   type="info"> 回复</el-link>
        </p>
      </div>
      <ReplyDialog :ShowDialog="ShowDialog"
                   :reply_user_id="replycomment.user_id"
                   :comment_id="comment.id" />
    </div>

  </div>
</template>

<script>
import ReplyDialog from '@/components/Comment/ReplyDialog'
export default {
  props: {
    // 接受回复评论参数
    replycomment: {
      type: Object,
      required: true
    },
    // 接受被回复评论
    comment: {
      type: Object,
      required: true
    }
  },
  components: {
    ReplyDialog
  },
  data () {
    return {
      reply: {},
      isLiked: false,
      ShowDialog: false,
    };
  },
  computed: {

  },
  watch: {
    replycomment: {
      immediate: true,
      deep: true,
      handler () {
        this.reply = this.replycomment
      }
    }
  },
  created () {

  },
  mounted () {
    // 获取评论点赞状态
    this.getCommentThumbStatusByID()
  },
  methods: {
    // 评论点赞
    async CommentThumb () {
      const datas = this.$qs.stringify({ reply_id: this.reply.id })
      const res = await this.$API.article.ReplyCommentThumb(datas)
      // console.log("thumbs2",res)
      if (res.status == 200) {
        this.isLiked = !this.isLiked
        // this.$message.success(this.isLiked?"取消点赞成功":"点赞成功")
        // 重新获得该评论
        const res2 = await this.$API.article.getReplyCommentById(this.reply.id)
        console.log("thumbs2status", res2)
        if (res2.status == 200) {
          console.log("thumbsuccess", res2.data)
          this.reply = res2.data
        }
      }
    },
    // 获取该回复评论点赞状态
    async getCommentThumbStatusByID () {
      const { reply } = this
      const res = await this.$API.article.getReplyCommentThumbStatus(reply.id)
      console.log("thumbstatus", res)
      if (res.status == 200) {
        this.isLiked = res.data ? true : false
      }
    },
    // 回复评论
    async addReplyComment () {
      this.ShowDialog = true
    },
  },
};
</script>

<style scoped>
.comment-header {
  display: flex;
  flex-wrap: wrap;
}

.author {
  width: 100%;
  font-weight: bold;
  margin-right: 7px;
}
.comment-options {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.timestamp {
  color: #999;
}

.comment-content {
  margin-top: 10px;
}

.comment-body {
  margin-bottom: 10px;
}

.replies {
  margin-top: 10px;
}

.reply {
  margin-bottom: 10px;
  border-left: 2px solid #eee;
  padding-left: 10px;
}
.liked {
  color: red;
}
</style>
